<template>
  <div class="baby">
    <!-- @click-left="onClickLeft"
    @click-right="onClickRight" -->
    <van-list
    v-model="loading"
    finished-text="没有更多了"
    @load="onLoad"
    >
      <van-card
        v-for="(prod,index) in postList"
        :key="prod.id"
        :title="prod.title"
        :thumb="prod.thumb_img"
        @click="Details(index)"
      >
        <template #desc>
          <p class="des">
            <span v-html="prod.license_date"></span> |
            <i
              class="iconfont"
              v-html="prod.road_haul"
              style="font-size: 12px"
            ></i>
          </p>
        </template>
        <template #price>
          <p class="prc">
            <i class="iconfont" v-html="prod.price"></i>
            首付<i class="iconfont" v-html="prod.first_pay"></i>
          </p>
        </template>
        <template #num>
          <img
            src="https://sta.guazistatic.com/guazi-mall-second/img/like-normal-empty.f3166e1.png"
            style="width: 20px; higth: 20px"
          />
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { getBusiness } from '@/api/home'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Baby',
  data() {
    return {
      loading: true,
      finished: false,
      postList: [],
      page: 1,
    }
  },
  async created() {
    try {
      const [{ postList, page }] = await Promise.all([getBusiness()])
      this.page = page
      this.postList = postList
      this.loading = false
    } catch (error) {
      console.error('有错误：', error)
    }
  },
  methods: {
    async onLoad() {
      const { postList } = await getBusiness(this.page)
      this.postList = [
        ...this.postList,
        ...postList,
      ]
      this.page += 1
      this.loading = false
    },
    Details(id) {
      this.$router.push('/detail/' + (id + 1))
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .van-card__thumb {
  width: 160px;
  height: 100px;
}
::v-deep .van-card__title {
  min-height: 40px;
  font-weight: 400;
  line-height: 20px;
  font-size: 16px;
}
.des {
  margin-top: -1px;
  color: #8f96a0;
}
.prc {
  margin-top: -3px;
  color: #ff7147;
  .iconfont:nth-child(1) {
    font-weight: 600;
  }
  .iconfont:nth-child(2) {
    font-weight: normal;
    font-size: 12px;
  }
}
</style>
